<template>
    <div class="options"><button @click="fate('all')">全部</button>
        <span  style="color: red; margin-right: 5px; font-size: 18px;">{{all}}</span>
        <span>条事项</span>
        <button @click="fate('all1')">已完成:<span style="color: red; margin-right: 5px; font-size: 18px;">{{ndone}}</span></button>
        <button @click="fate('all2')">未完成:<span style="color: red; margin-right: 5px; font-size: 18px;">{{undone}}</span></button>
    </div>
</template>


<script setup>
import { computed, onMounted,ref } from 'vue'
import emitter from '../plugins/Bus'
let all = ref(0)
let ndone = ref(0)
let undone =ref(0)
let ccc;
        
            emitter.on('fns', (e) => {
                let cc
                e.value.forEach(item => {
                    ccc = e.value
                    console.log(ccc);
                    cc = e.value.filter(p => p.done === false)


                });
                console.log(cc.length, 123);
                all.value = e.value.length
                undone.value = cc.length
                ndone.value = e.value.length - cc.length
            })
        
        

let fate = function (itis) {
    // console.log(itis);
    emitter.emit('fnss', itis)
}
</script>
<style>
button{
        background: transparent;
            border: 1px double #00bfff;
            color: #666;
            cursor: pointer;
            font-size: 16px;
            font-weight: bolder;
            margin: 10px;
            outline: 0;
    }
    .options{
        text-align: center;
    }
</style>